<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened }">
  <div class="default-header">
    <div class="row">
      <h1 class="col">Dynamips IOS Router configuration</h1>
    </div>
  </div>
  <div class="default-content" *ngIf="iosTemplate">
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> General settings </mat-panel-title>
        </mat-expansion-panel-header>
        <form [formGroup]="generalSettingsForm">
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              formControlName="templateName"
              [(ngModel)]="iosTemplate.name"
              placeholder="Template name"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              formControlName="defaultName"
              [(ngModel)]="iosTemplate.default_name_format"
              placeholder="Default name format"
            />
          </mat-form-field>
          <mat-label>Platform - {{ iosTemplate.platform }}</mat-label
          ><br /><br />
          <mat-label>Chassis - {{ iosTemplate.chassis }}</mat-label
          ><br /><br />
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              formControlName="symbol"
              [(ngModel)]="iosTemplate.symbol"
              placeholder="Symbol"
            />
          </mat-form-field>
          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
          <mat-form-field class="form-field">
            <mat-select
              [ngModelOptions]="{ standalone: true }"
              placeholder="Category"
              [(ngModel)]="iosTemplate.category"
            >
              <mat-option *ngFor="let category of categories" [value]="category[1]">
                {{ category[0] }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              formControlName="path"
              [(ngModel)]="iosTemplate.image"
              placeholder="IOS image path"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              formControlName="initialConfig"
              [(ngModel)]="iosTemplate.startup_config"
              placeholder="Initial startup-config"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              [ngModelOptions]="{ standalone: true }"
              matInput
              type="text"
              [(ngModel)]="iosTemplate.private_config"
              placeholder="Initial private-config"
            />
          </mat-form-field>
        </form>
        <mat-form-field class="select">
          <mat-select placeholder="Console type" [(ngModel)]="iosTemplate.console_type">
            <mat-option *ngFor="let type of consoleTypes" [value]="type">
              {{ type }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-checkbox [(ngModel)]="iosTemplate.console_auto_start"> Auto start console </mat-checkbox>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> Memories and disks </mat-panel-title>
        </mat-expansion-panel-header>
        <form [formGroup]="memoryForm">
          <mat-form-field class="form-field">
            <input matInput type="number" formControlName="ram" [(ngModel)]="iosTemplate.ram" placeholder="RAM size" />
            <span matSuffix>MB</span>
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="number"
              formControlName="nvram"
              [(ngModel)]="iosTemplate.nvram"
              placeholder="NVRAM size"
            />
            <span matSuffix>MB</span>
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="number"
              formControlName="iomemory"
              [(ngModel)]="iosTemplate.iomem"
              placeholder="I/O memory"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="number"
              formControlName="disk0"
              [(ngModel)]="iosTemplate.disk0"
              placeholder="PCMCIA disk0"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="number"
              formControlName="disk1"
              [(ngModel)]="iosTemplate.disk1"
              placeholder="PCMCIA disk1"
            />
          </mat-form-field>
        </form>
        <mat-checkbox [(ngModel)]="iosTemplate.auto_delete_disks">
          Automatically delete NVRAM and disk files
        </mat-checkbox>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> Slots </mat-panel-title>
        </mat-expansion-panel-header>
        <h6>Adapters</h6>
        <div *ngIf="iosTemplate.chassis && chassis[iosTemplate.platform]">
          <div *ngFor="let index of [0, 1, 2, 3, 4, 5, 6, 7]">
            <mat-select
              placeholder="Slot {{ index }}"
              [(ngModel)]="networkAdaptersForTemplate[index]"
              [ngModelOptions]="{ standalone: true }"
              *ngIf="networkAdapters[iosTemplate.chassis][index]"
            >
              <mat-option *ngFor="let option of networkAdapters[iosTemplate.chassis][index]" [value]="option">
                {{ option }}
              </mat-option>
            </mat-select>
          </div>
        </div>
        <div *ngIf="iosTemplate.platform && !chassis[iosTemplate.platform]">
          <div *ngFor="let index of [0, 1, 2, 3, 4, 5, 6, 7]">
            <mat-select
              placeholder="Slot {{ index }}"
              [(ngModel)]="networkAdaptersForTemplate[index]"
              [ngModelOptions]="{ standalone: true }"
              *ngIf="networkAdaptersForPlatform[iosTemplate.platform][index]"
            >
              <mat-option
                *ngFor="let option of networkAdaptersForPlatform[iosTemplate.platform][index]"
                [value]="option"
              >
                {{ option }}
              </mat-option>
            </mat-select>
          </div>
        </div>
        <br /><br />
        <h6>WICs</h6>
        <div *ngIf="iosTemplate.wic0 || iosTemplate.wic0 === ''">
          <mat-select placeholder="WIC 0" [(ngModel)]="iosTemplate.wic0" [ngModelOptions]="{ standalone: true }">
            <mat-option *ngFor="let option of networkModules[iosTemplate.platform][0]" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </div>
        <div *ngIf="iosTemplate.wic1 || iosTemplate.wic1 === ''">
          <mat-select placeholder="WIC 1" [(ngModel)]="iosTemplate.wic1" [ngModelOptions]="{ standalone: true }">
            <mat-option *ngFor="let option of networkModules[iosTemplate.platform][1]" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </div>
        <div *ngIf="iosTemplate.wic2 || iosTemplate.wic2 === ''">
          <mat-select placeholder="WIC 2" [(ngModel)]="iosTemplate.wic2" [ngModelOptions]="{ standalone: true }">
            <mat-option *ngFor="let option of networkModules[iosTemplate.platform][2]" [value]="option">
              {{ option }}
            </mat-option>
          </mat-select>
        </div>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> Advanced </mat-panel-title>
        </mat-expansion-panel-header>
        <form [formGroup]="advancedForm">
          <mat-form-field class="form-field">
            <input
              matInput
              formControlName="systemId"
              type="text"
              [(ngModel)]="iosTemplate.system_id"
              placeholder="System ID"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              [ngModelOptions]="{ standalone: true }"
              matInput
              type="text"
              [(ngModel)]="iosTemplate.mac_addr"
              placeholder="Base MAC"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              [ngModelOptions]="{ standalone: true }"
              matInput
              type="text"
              [(ngModel)]="iosTemplate.idlepc"
              placeholder="Idle-PC"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              formControlName="idlemax"
              type="number"
              [(ngModel)]="iosTemplate.idlemax"
              placeholder="Idlemax"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              formControlName="idlesleep"
              type="number"
              [(ngModel)]="iosTemplate.idlesleep"
              placeholder="Idlesleep"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              formControlName="execarea"
              type="number"
              [(ngModel)]="iosTemplate.exec_area"
              placeholder="Exec area"
            />
          </mat-form-field>
        </form>
        <mat-checkbox [(ngModel)]="iosTemplate.mmap"> Enable mmap support </mat-checkbox><br /><br />
        <mat-checkbox [(ngModel)]="iosTemplate.sparsemem"> Enable sparse memory supoport </mat-checkbox>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> Usage </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-form-field class="form-field">
          <textarea matInput type="text" [(ngModel)]="iosTemplate.usage"></textarea>
        </mat-form-field>
      </mat-expansion-panel>
    </mat-accordion>
    <div class="buttons-bar">
      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
    </div>
  </div>
</div>
<app-symbols-menu
  *ngIf="isSymbolSelectionOpened && iosTemplate"
  [server]="server"
  [symbol]="iosTemplate.symbol"
  (symbolChangedEmitter)="symbolChanged($event)"
></app-symbols-menu>
